<template>
  <div :class="$style.onlineOrOffline">
    <Icon :allow="allow" :src="src" :srcset="srcset" :text="text" @on-click="iconClickHandle" />
  </div>
</template>
<script>
import Icon from './Icon'
import beforeSign from './js/beforeSign.js'
import afterSign from './js/afterSign.js'
import { mapGetters } from 'vuex'
export default {
  name: 'Free',
  components: {
    Icon
  },

  data() {
    return {}
  },
  computed: {
    ...mapGetters(['callInfo', 'agentState', 'interval', 'skillList', 'queueSize', 'agentid', 'phonenum', 'agentInfo']),
    src() {
      return this.allow ? afterSign.offline : beforeSign.offline
    },
    srcset() {
      return this.allow ? afterSign.offline2x : beforeSign.offline2x
    },
    text() {
      return this.allow ? '在线' : '离线'
    },
    allow() {
      const { sign } = this.agentState
      return sign
    }
  },
  created() {
  },
  methods: {
    // 话务条被单击
    iconClickHandle() {
      if (!this.allow) return
      // if (!this.sign || this.work || this.talk) {
      //   this.$cps.agentEnterIdle().then(res => {
      //     this.$notifySuccess('退出工作状态成功！')
      //   }).catch(() => {
      //     this.$notifyError('退出工作状态失败！')
      //   })
      // } else {
      //   this.$cps.agentEnterWork().then(res => {
      //     this.$notifySuccess('进入工作状态成功！')
      //   }).catch(() => {
      //     this.$notifyError('进入工作状态失败！')
      //   })
      // }
    }
  }
}
</script>
<style lang="scss" module>
@import "@/styles/mixin.scss";
.onlineOrOffline {
}
.btn{
  @include flex($justify: flex-end);
}
</style>
